<div class="tab-wrap" id="partnerWrap">
    <#if isUnlocked == false>
        <div class="lock-tips">
            <div class="title">
                Below is a sample report. This feature only available to <em>PRO</em> version or higher.
                <br>
                Please use credit to unlock the report or upgrade your membership.
            </div>
            <div class="right">
                <button class="gd-btn btn-default">Unlock</button>
                <button class="gd-btn btn-info">Upgrade</button>
            </div>
        </div>
        <#if isMobile == false>
        <#--        <img class="demo-img" src="${request.contextPath}/static/img/ins/Brand-Media-Web.png" alt="sample report">-->
        <#else>
        <#--        <img class="demo-img" src="${request.contextPath}/static/img/ins/Brand-Media-Mobile.png"-->
        <#--             srcset="${request.contextPath}/static/img/ins/Brand-Media-Mobile@2x.png 2x" alt="sample report">-->
        </#if>
    <#else>
        <ul class="date-tab">
            <li class="date-tab-item" value="0">7 Days</li>
            <li class="date-tab-item" value="1">15 Days</li>
            <li class="date-tab-item is-active" value="2">30 Days</li>
        </ul>
        <div class="wrap-item">
            <div class="wrap-item__title">
                Ad Partner Data Overview
                <div class="gd-popover"
                     content="<dl class='modal-top'>
                 <dt>1. Ad Partner:</dt>
                 <dd>The number of influencers tagged the brand or product of the brand in the selected period.<#if isMobile == false><br></#if>and the media posted by the brand official accounts in the selected period.</dd>
                 <dt>2. Post:</dt>
                 <dd>The number of media posts tagged with the brand or a product of the brand.</dd>
                 <dt>3. Views:</dt>
                 <dd>The number of views on the video posts that tagged with the brand or a product of the brand.</dd>
                 <dt>4. Likes:</dt>
                 <dd>The number of likes on the media posts that tagged with the brand or a product of the brand.</dd>
                 <dt>5. Reviews:</dt>
                 <dd> The number of reviews on the media posts that tagged with the brand or a product of the brand.</dd>
                 <dt>6. Engagements:</dt>
                 <dd>The number of likes and reviews on the media posts that tagged with the brand or a product of the brand.</dd>
            </dl>">
                    <i class="iconfont iconfaq"></i>
                </div>
            </div>
            <div class="wrap-item__inner">
                <div class="grid-data-list row-6 m-row-2" id="partnerBaseInfo">
                    <div class="grid-data-item">
                        <div class="title">
                            Ad Partner
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">
                            Post
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">
                            Views
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">
                            Likes
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">
                            Reviews
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                    <div class="grid-data-item">
                        <div class="title">
                            Engagements
                        </div>
                        <div class="sub-title">-</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrap-item">
            <div class="wrap-item__title">Ad Partner Post Trends</div>
            <div class="wrap-item__inner">
                <div class="trend-wrap" id="partnerTrend"></div>
            </div>
        </div>
        <div class="iconfont" style="color: #1e9fff;margin-right: 50px;" ></div>
        <div class="wrap-item">
            <div class="wrap-item__title">
                Ad Partner Account Data
                <div class="gd-popover"
                     content="<dl class='modal-tip'>
                    <dt>1. Post:</dt>
                    <dd>The number of media tagged an account or a product of the brand in the last 30 days.</dd>
                    <dt>2. Engagements:</dt>
                    <dd>The number of likes and reviews on media posted by the ad partner in the last 30 days.</dd>
                </dl>">
                    <i class="iconfont iconfaq"></i>
                </div>
            </div>
            <div class="grid-list" id="adPartnerList">
                <div class="grid-list__inner row-4"></div>
                <div class="grid-list__footer">
                    <span>View More</span>
                </div>
            </div>
        </div>
    </#if>
</div>
<script src="${request.contextPath}/static/plugins/echarts.min.js"></script>
<script src="${request.contextPath}/static/js/nums.js"></script>
<script src="${request.contextPath}/static/js/dayjs.min.js"></script>
<script src="${request.contextPath}/static/js/time.js"></script>
<script type="module">
    import { getGridList, troggleActive, openDetail } from "/static/js/common.js"
    import { Select } from '/static/js/gd-ui/select/index.es.js'

    const adPartnerWrap = document.getElementById('partnerWrap')
    let dayType = 2

    const mediaListParam = {
        brandId: '${brand.id?c}',
        uid: null,
        page: 1,
        pageSize: 9,
        mediaType: 0,
    }

    const adPartnerParam = {
        brandId:'${brand.id?c}',
        dayType,
        page: 1,
        pageSize: 8,
    }
    <#if isUnlocked == true>
    initPartner()
    initEvent()
    </#if>

    function initPartner() {
        getPartnerStatis()
        getPartnerList()
        getPartnerTrend()
    }

    function initEvent() {
        //添加时间tab选择事件
        adPartnerWrap.querySelectorAll('.date-tab li').forEach(item => {
            item.addEventListener('click', () => {
                troggleActive(item, ()=> {
                    dayType = +item.getAttribute('value')
                    adPartnerParam.page = 1
                    initPartner()
                })
            })
        })
        adPartnerWrap.querySelector('.grid-list__footer span').addEventListener('click', () => {
            adPartnerParam.page ++
            getPartnerList()
        })
    }

    function getPartnerStatis() {
        const wrap = document.getElementById('partnerBaseInfo')
        wrap.showLoading()
        const url = getEncodeUrl('/ins/brand/ad/account/count',{
            brandId:'${brand.id?c}',
            dayType
        })
        _axios.get(url).then(res => {
            if (res.Code === 200) {
                const statis = wrap.querySelectorAll('.sub-title')
                if(res.Data) {
                    statis[0].innerText = numFormat(res.Data.posts)
                    statis[1].innerText = numFormat(res.Data.adPartner)
                    statis[2].innerText = numFormat(res.Data.views)
                    statis[3].innerText = numFormat(res.Data.likes)
                    statis[4].innerText = numFormat(res.Data.reviews)
                    statis[5].innerText = numFormat(res.Data.engagements)
                }
            }
            wrap.hideLoading()
        })
    }



    function getPartnerTrend() {
        const wrap = document.getElementById('partnerTrend')
        wrap.showLoading()
        const url = getEncodeUrl('/ins/brand/ad/account/trend', {
            brandId: '${brand.id?c}',
            dayType
        })
        _axios.get(url).then(res => {
            if (res.Code === 200) {
                const data = res.Data
                if (data && data.length > 0) {
                    const chart = echarts.init(wrap)
                    const dayName = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
                    const xData = data.map(item => dayName[+item.weekDay-1])
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'line',
                            },
                        },
                        color: '#1890FF',
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: xData,
                            axisTick:{
                                show:false,//不显示坐标轴刻度线
                                lineStyle: {
                                    color: 'rgba(0,0,0,.45)' //刻度颜色
                                }
                            },
                        },
                        grid: {
                            <#if isMobile == true>
                            top: 40,
                            left: 50,
                            bottom: 25,
                            right: 50,
                            <#else>
                            top: 40,
                            left: 50,
                            bottom: 30,
                            right: 50,
                            </#if>
                        },
                        yAxis: [{
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(0,0,0,.45)',
                                    type: 'dashed' // 坐标轴虚线
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                                },
                            },
                        }],
                        series: [{
                            name: 'Ad partner',
                            type: 'line',
                            symbol: 'none',
                            data: data.map(item => item.partnerCount),
                            smooth: true,
                        }],
                    }
                    chart.setOption(option)
                } else {
                    showNoDataImg(wrap, {
                        isECharts: true
                    })
                }
            }
            wrap.hideLoading()
        })
    }


    function getPartnerList () {
        adPartnerParam.dayType = dayType
        const wrap = document.getElementById('adPartnerList')
        const inner = wrap.querySelector('.grid-list__inner')
        getGridList({
            loadingElement: wrap,
            url: '/ins/brand/ad/account/page',
            params: adPartnerParam,
            listWrap: inner,
            footerElement: wrap.querySelector('.grid-list__footer'),
            listDomFunc: item => {
                let str = ''
                str += '<a href="/instagram/influencer/' + item.username + '">' +
                    '<div class="grid-item" data-id="' + item.uid + '" data-shortcode="' + item.shortcode + '">' +
                    '<div class="blogger-item">' +
                    '<div class="blogger-cover">' +
                    '<img class="cover" src="' + getImage(item.picUrl, IMAGE_TYPE.BLOGGER, IMAGE_SIZE.MIDDLE) + '" alt="product image">' +
                    '<img class="auth" src="/static/img/ins/Authentication.png" srcset="/static/img/ins/Authentication@2x.png 2x">' +
                    '</div>' +
                    '<div class="brand-info">'
                str += '<div class="title">' + item.username
                if (item.categoryName && gugeeGobal.isMobile) {
                    str += '<div class="category">' + item.categoryName + '</div>'
                }
                str += '</div>' +
                    '<div class="sub-title">Followers ' + numFormat(item.followerCount) + '</div>' +
                    '</div>'
                if (item.categoryName && !gugeeGobal.isMobile) {
                    str += '<div class="category">' + item.categoryName + '</div>'
                }
                str += '</div>'
                if (item.categoryName) {
                    str += '<div class="data-list">'
                } else {
                    str += '<div class="data-list" style="margin-top: auto">'
                }
               str += '<div class="data-item">' +
                    '<div class="title">Post</div>' +
                    '<div class="sub-title">' + numFormat(item.posts) + '</div>' +
                    '</div>' +
                    '<div class="data-item">' +
                    '<div class="title">Engagements</div>' +
                    '<div class="sub-title">' + numFormat(item.engagements) + '</div>' +
                    '</div>' +
                    '</div>' +
                    '<div class="bottom" data-id="' + item.uid + '">' +
                    '<span>View Media List</span>' +
                    '</div>' +
                    '</div>' +
                    '</a>'
                return str
            },
            otherEvent: () => {
                adPartnerWrap.querySelectorAll('.grid-item .bottom span').forEach(item => {
                    item.parentElement.addEventListener('click', e => {
                        const productId = item.parentElement.getAttribute('data-id')
                        // Object.assign(mediaListParam, {
                        //     page: 1,
                        //     dayType,
                        //     productId: productId
                        // })
                        getMediaList(productId)
                        e.preventDefault()
                    })
                })
            }
        })
    }


    function getMediaList(uid) {
        showLoading()
        mediaListParam.uid = uid
        const url = getEncodeUrl('/ins/brand/blogger/media', mediaListParam)
        _axios.get(url).then(res => {
            hideLoading()
            if (res.Code === 200) {
                let str = '<div class="title">Media List</div>' +
                    '<div class="grid-list" id="partnerList">' +
                    '<div class="grid-list__inner row-3">'
                res.Data.list.forEach(item => {
                    str += '<div class="grid-item" data-id="' + item.id + '" data-shortcode="' + item.shortcode + '">' +
                        '<div class="cover">' +
                        '<img src="' + item.displayUrl + '" alt="FC Barcelona">'
                    switch (item.mediaType) {
                        case 1:
                            str += '<i class="iconfont iconMultiPhoto-16px"></i>'
                            break
                        case 2:
                            str += '<i class="iconfont iconinsvideo-16px"></i>'
                            break
                        case 3:
                            str += '<i class="iconfont iconigtv"></i>'
                            break
                        case 4:
                            str += '<i class="iconfont iconinstagram-reels"></i>'
                            break
                    }
                    str += '<div class="bottom">' +
                        '<div class="left">'
                    if (item.score >= 90) {
                        str += '<span class="red">'
                    } else if (item.score < 90 && item.score >= 80) {
                        str += '<span class="orange">'
                    } else if (item.score < 80 && item.score >= 70) {
                        str += '<span class="green">'
                    } else {
                        str += '<span class="gray">'
                    }
                    str += '<i class="iconfont iconhuo"></i>' + numFormat(+item.score) +
                        '</span>' +
                        '</div>'
                    if (item.isSponsored) {
                        str += '<div class="right">Sponsored</div>'
                    }
                    str += '</div>' + '</div>'
                    str += '<div class="data-list">' +
                        '<div class="data-item">' +
                        '<div class="title">Reviews</div>' +
                        '<div class="sub-title">' + numFormat(+item.reviews) + '</div>' +
                        '</div>' +
                        '<div class="data-item">' +
                        '<div class="title">Likes</div>' +
                        '<div class="sub-title">' + numFormat(+item.likes) + '</div>' +
                        '</div>' +
                        '<div class="data-item">' +
                        '<div class="title">ER</div>' +
                        '<div class="sub-title">' + numFormat(+item.er * 100) + '%</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>'
                })
                str += '</div>' +
                    '<div class="grid-list__footer">' +
                    '<span>View More</span>' +
                    '</div>' +
                    '</div>'
                showModal({
                    position: {
                        top: 100
                    },
                    class: 'product-media-modal',
                    isShowConfirmBtn: false,
                    isShowCancelBtn: false,
                    content: str
                })
                if (res.Data.list.length === 0) {
                    showNoDataImg(document.getElementById('partnerList'))
                }

                if (gugeeOS.isIPhone) {
                    const inner = document.querySelector('.product-media-modal .grid-list__inner')
                    inner.style.marginBottom = '160px'
                }
                const list = document.querySelectorAll('.product-media-modal .grid-item')
                list.forEach(item => {
                    item.addEventListener('click', () => {
                        const id = item.getAttribute('data-id')
                        openDetail(id)
                    })
                })

                // view More 事件
                const footer = document.querySelector('.product-media-modal .grid-list__footer')
                if (res.Data.lastPage) {
                    footer.hide()
                }
                footer.addEventListener('click', () => {
                    mediaListParam.page++
                    getMoreMediaList()
                })
            }
        })
    }

    function getMoreMediaList() {
        const wrap = document.querySelector('.product-media-modal .grid-list')
        const footer = wrap.querySelector('.grid-list__footer')
        getGridList({
            loadingElement: wrap,
            url: '/ins/product/rel/media/new',
            params: mediaListParam,
            listWrap: wrap.querySelector('.grid-list__inner'),
            footerElement: footer,
            listDomFunc: item => {
                let str = ''
                str += '<div class="grid-item" data-id="' + item.id + '">' +
                    '<div class="cover">' +
                    '<img src="' + item.displayUrl + '" alt="FC Barcelona">'
                switch (item.mediaType){
                    case 1:
                        str += '<i class="iconfont iconMultiPhoto-16px"></i>'
                        break
                    case 2:
                        str += '<i class="iconfont iconinsvideo-16px"></i>'
                        break
                    case 3:
                        str += '<i class="iconfont iconigtv"></i>'
                        break
                    case 4:
                        str += '<i class="iconfont iconinstagram-reels"></i>'
                        break
                }
                str += '<div class="bottom">' +
                    '<div class="left">' +
                    '<i class="iconfont iconhuo"></i>' +
                    '<span>' + numFormat(item.score) + '</span>' +
                    '</div>'
                if (item.isSponsored) {
                    str += '<div class="right">Sponsored</div>'
                }
                str += '</div>' + '</div>'
                str += '<div class="data-list">' +
                    '<div class="data-item">' +
                    '<div class="title">Reviews</div>' +
                    '<div class="sub-title">' + numFormat(+item.commentCount) + '</div>' +
                    '</div>' +
                    '<div class="data-item">' +
                    '<div class="title">Likes</div>' +
                    '<div class="sub-title">' + numFormat(+item.likeCount) + '</div>' +
                    '</div>' +
                    '<div class="data-item">' +
                    '<div class="title">ER</div>' +
                    '<div class="sub-title">' + numFormat(+item.er * 100) + '%</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>'
                return str
            },
            otherEvent: () => {
                mediaListParam.page ++

                const list = document.querySelectorAll('.product-media-modal .brand-post-item')
                list.forEach(item => {
                    item.addEventListener('click', () => {
                        const id = item.getAttribute('data-id')
                        openDetail(id)
                    })
                })
            }
        })
    }



</script>